<template>
  <div class="product-list-container">
    <!-- 搜索表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          :clearable="true"
          v-model="product_out_id"
          @change="searchProduct"
          placeholder="输入入库编号进行搜索"
          :prefix-icon="Search"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <div class="table">
      <el-table :border="true" :data="auditList">
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column
          label="申请出库编号"
          align="center"
          type="default"
          prop="product_out_id"
          min-width="200"
        />
        <el-table-column
          min-width="160"
          label="产品名称"
          align="center"
          type="default"
          prop="product_name"
        />
        <el-table-column
          label="申请出库数量"
          align="center"
          type="default"
          prop="product_out_number"
          min-width="120"
        />
        <el-table-column
          min-width="120"
          label="申请出库总价"
          align="center"
          type="default"
          prop="product_out_price"
        />
        <el-table-column
          label="申请人"
          align="center"
          type="default"
          prop="product_out_apply_person"
          min-width="120"
        />
        <el-table-column
          label="申请出库时间"
          align="center"
          type="default"
          prop="product_apply_time"
          min-width="180"
        >
          <template v-slot="{ row }">
            {{ formaDate(row.product_apply_time) }}
          </template>
        </el-table-column>
        <el-table-column
          label="审核人"
          align="center"
          type="default"
          min-width="120"
          prop="product_out_audit_person"
        />
        <el-table-column
          label="审核时间"
          align="center"
          type="default"
          prop="product_audit_time"
          min-width="180"
        >
          <template v-slot="{ row }">
            {{ row.product_audit_time ? formaDate(row.product_audit_time) : '未审核' }}
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          type="default"
          prop="product_out_status"
          min-width="90"
        />
        <el-table-column
          label="申请出库备注"
          align="center"
          type="default"
          prop="apply_memo"
          min-width="210"
        />
        <el-table-column
          label="审核备注"
          align="center"
          type="default"
          min-width="210"
          prop="audit_memo"
        />
        <el-table-column label="操作" min-width="300" align="center" fixed="right">
          <template v-slot="{ row }">
            <el-popconfirm
              :title="`你确定要撤回 ${row.product_name} 的申请吗`"
              confirm-button-text="确认"
              cancel-button-text="取消"
              @confirm="withdrawApplyProduct(row.id)"
              width="250px"
            >
              <template #reference>
                <el-button type="primary" size="default">撤回申请</el-button>
              </template>
            </el-popconfirm>

            <el-button
              @click="outApplyFormSubmit(row)"
              :disabled="row.product_out_status !== '否决'"
              type="success"
              size="default"
              >再次申请</el-button
            >
            <el-button
              :disabled="row.product_out_status !== '申请出库'"
              v-if="userStore.UserInfo.identity !== '用户'"
              type="danger"
              size="default"
              @click="openAuditDialog(row)"
              >审核</el-button
            >
          </template></el-table-column
        >
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          class="pagination"
          v-model:current-page="page"
          :page-size="10"
          layout="prev, pager, next, jumper,total"
          :total="total"
        />
      </div>
    </div>
  </div>
  <el-dialog
    @close="auditProduct.audit_memo = ''"
    v-model="auditDialog"
    title="审核产品"
    width="30%"
    align="center"
  >
    <p>确定审核该产品的出库吗</p>
    <el-radio-group style="justify-content: center" v-model="auditProduct.product_out_status">
      <el-radio value="同意" label="同意"></el-radio>
      <el-radio value="否决" label="否决"></el-radio>
      <el-input
        v-model="auditProduct.audit_memo"
        type="textarea"
        aria-placeholder="请输入审核备注"
      />
    </el-radio-group>
    <template #footer>
      <el-button type="primary" size="default" @click="auditSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  applyOutProductAPI,
  applyProductListAPI,
  auditProductAPI,
  searchProductForApplyIdAPI,
  withdrawApplyProductAPI
} from '@/api/product'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import { onMounted, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { tracking } from '@/utils/operation'
const userStore = useUserStore()

const activeName = defineProps(['activeName'])

// 分页器数据
const page = ref<number>(1)
const total = ref<number>(20)
// 处理日期
const formaDate = (date: string) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}

/** 申请出库编号 */
const product_out_id = ref<number>()
const searchProduct = async () => {
  if (product_out_id.value) {
    const res = await searchProductForApplyIdAPI(product_out_id.value)
    auditList.value = res.data
    total.value = auditList.value.length
  } else {
    getAuditList()
  }
}
/** 审核列表 */
const auditList = ref<ProductAllInfo[]>([])
const getAuditList = async () => {
  const res = await applyProductListAPI(page.value)
  auditList.value = res.data!
  total.value = res.total!
}
/**审核弹窗*/
const auditDialog = ref<boolean>(false)
const openAuditDialog = (row: OutProduct) => {
  auditDialog.value = true
  Object.assign(auditProduct, row)
  auditProduct.product_out_audit_person = userStore.UserInfo.name!
}
/** 单个产品数据 */
const auditProduct = reactive<OutProduct>({})
// 审核
const auditSubmit = async () => {
  await auditProductAPI(auditProduct)
  ElMessage({ type: 'success', message: '审核成功' })
  /** 记录操作 */
  const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo
  tracking(
    '产品',
    userInfo?.name,
    auditProduct.product_name!,
    '中级',
    `${auditProduct.product_out_status}出库`
  )
  auditDialog.value = false
  getAuditList()
}

/** 撤回申请 */
const withdrawApplyProduct = async (id: number) => {
  await withdrawApplyProductAPI(id)
  /** 记录操作 */
  const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo
  tracking('产品', userInfo?.name, auditProduct.product_name!, '初级', `撤回出库申请`)
  ElMessage({ type: 'success', message: '成功' })
  getAuditList()
}
/** 再次申请 */
const outApplyFormSubmit = async (row: outApplyForm) => {
  await applyOutProductAPI(row)
  /** 记录操作 */
  const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo
  tracking('产品', userInfo?.name, auditProduct.product_name!, '初级', `申请出库`)
  ElMessage({ type: 'success', message: '申请成功' })
  getAuditList()
}
watch([page, activeName], () => {
  getAuditList()
})
onMounted(() => {
  getAuditList()
})
</script>

<style scoped lang="scss">
.product-list {
  padding: 0 8px;
  .el-form {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin: 0;
    }
  }
  .el-table {
    margin-top: 10px;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin: 15px;
  }
}
</style>
